<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg</title>
  <style>
    .chart {
      width: 800px;
      height: 400px;
      background-color: gray;
    }
  </style>
</head>

<body>
  <svg class="chart">
    <!-- 画线段 -->
    <!-- <line x1="100" y1="100" x2="200" y2="200" stroke="#000"></line>
    <line x1="200" y1="200" x2="300" y2="100" style="stroke: #000"></line>
    <line x1="300" y1="100" x2="100" y2="100" stroke="#000"></line> -->
    <!-- 画折线 -->
    <!-- <polyline points="100 100, 200 200, 300 100, 100 100" stroke="#000" fill-opacity="0"></polyline> -->
    <!-- 矩形 -->
    <!-- <rect x="100" y="100" width="200" height="100" stroke="#000" fill-opacity="0"></rect> -->
    <!-- 圆形 -->
    <!-- <circle cx="100" cy="100" r="50" stroke="#000" fill-opacity="0"></circle> -->
    <!-- 椭圆 -->
    <!-- <ellipse cx="200" cy="100" rx="100" ry="50" stroke="#000" fill-opacity="0"></ellipse> -->
    <!-- 多边形：和polyline相比，他会首尾相连 -->
    <!-- <polygon points="100 100, 200 200, 300 100" stroke="#000" fill-opacity="0"></polygon> -->

    <!-- 任意图形 -->
    <!-- <path d="
      M 100 100
      L 200 200
      L 300 100
      Z
    " stroke="#000" fill-opacity="0"></path> -->
    <!-- 
      五角星 
                   x4(300 100)
 
        x1(200 200)      x2(400 200)

            x3(250 350)   x5(350 350)
    -->
    <path d="
      M 200 150
      L 400 150
      L 250 320
      L 300 70
      L 350 320
      Z
    " stroke="#000" fill-opacity="0"></path>
  </svg>


  <svg viewBox="0 0 1024 1024" width="32" height="32">
    <path
      d="M705.941333 173.258667l74.666667 32a32 32 0 0 1 16.202667 15.466666l160 330.666667c0.362667 0.757333 0.693333 1.525333 0.992 2.293333a74.453333 74.453333 0 0 1 7.168 41.536l-22.154667 192A74.666667 74.666667 0 0 1 868.64 853.333333h-243.946667a74.666667 74.666667 0 0 1-74.176-66.112L543.370667 725.333333h-62.752l-7.146667 61.898667A74.666667 74.666667 0 0 1 399.317333 853.333333h-243.946666a74.666667 74.666667 0 0 1-74.176-66.112l-22.154667-192a74.314667 74.314667 0 0 1 7.114667-41.408l0.256-0.64 0.8-1.781333 160-330.666667a32 32 0 0 1 14.112-14.485333l2.08-0.981333 74.666666-32a32 32 0 0 1 26.922667 58.026666l-1.706667 0.789334-63.68 27.296-122.24 252.618666 264.106667 0.010667a74.666667 74.666667 0 0 1 74.176 83.221333L488 661.333333h47.978667l-7.616-66.101333A74.666667 74.666667 0 0 1 602.538667 512h264.106666l-122.24-252.629333-63.68-27.296a32 32 0 0 1 25.216-58.816zM421.461333 576H133.205333a10.666667 10.666667 0 0 0-10.592 11.893333l22.154667 192a10.666667 10.666667 0 0 0 10.592 9.44h243.946667a10.666667 10.666667 0 0 0 10.592-9.44l22.154666-192A10.666667 10.666667 0 0 0 421.461333 576z m469.333334 0H602.538667a10.666667 10.666667 0 0 0-10.592 11.893333l22.154666 192a10.666667 10.666667 0 0 0 10.592 9.44h243.946667a10.666667 10.666667 0 0 0 10.592-9.44l22.154667-192A10.666667 10.666667 0 0 0 890.794667 576z"
      fill="#2c2c2c"></path>
  </svg>

  <svg t="1644551620032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="2960" width="20" height="20">
    <path
      d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
      p-id="2961"></path>
  </svg>
</body>

</html>